<template>
<el-main>
    <div><z-header></z-header></div>
    <el-header  style="height: 88px; border-bottom: 1px solid #ccc;">
        <el-row class="middle topnav clearfix">
            <el-col :span="16">
                <div class="dh-logo" v-for="(item,index) in logo" :key="index">
                    <router-link to="/"><img v-if="item.img" :src="item.img"></router-link>
                    <h3 v-if="item.text">{{item.text}}</h3>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="anchor" v-for="(item,index) in nav" :key="index">
                    <span v-if="item.text" :index="item.index" @click="scrollTo(3)">{{item.text}}</span>
                </div>
            </el-col>
        </el-row>
    </el-header>
    <div class="containe">
        <!-- 第一段 专属线下活动平台 -->
        <div class="bg-style quanbu clearfix">
            <div class="hl">
                <div class="middle slogan">
                    <div class="platform clearfix">
                        <h1>专属线下活动平台</h1>
                        <p>多会企业版为主办方提供独立品牌的专属活动平台</p>
                        <div class="icon" v-for="(item, index) in imglog" :key="index">
                            <i class="i"><img v-if="item.img" :src="item.img"></i>
                            <h4 v-if="item.text">{{item.text}}</h4>
                        </div>
                        <el-row>
                            <el-button class="but1" type="warning" plain>立即试用</el-button>
                            <el-button class="btu2" type="primary" plain>联系销售</el-button>
                        </el-row>
                    </div>
                </div>
            </div>
            <!-- 企业级的线下活动解决方案 -->
            <div class="middle solution">
                <h1>企业级的线下活动解决方案</h1>
                <p>多会企业版帮助企业用户快速配置专属的活动平台。通过微信小程序、微信服务号和网页等多种
                    方式提供服务。使用主办方支付商户收款，票款快速到账，多会不收取手续费。活动报名签到体
                    验更佳，效率更高。
                </p>
            </div>
            <!-- 独立活动小程序 结合微信服务号 实时专属收款渠道 融合品牌风格 -->
            <div class="icon-l" v-for="(item, index) in imglog2" :key="index">
                <i class="i"><img v-if="item.img" :src="item.img"></i>
                <h4 v-if="item.text1">{{item.text1}}</h4>
                <p v-if="item.text2">{{item.text2}}</p>
            </div>
        </div>
        <!-- 第二段 简单(simple)的价格，专业的产品和服务 -->
        <div class="simple">
            <div class="middle ple">
                <h1>简单的价格，专业的产品和服务</h1>
                <el-card shadow="never">
                    <div slot="header" class="clearfix">
                        <span>企业版</span>
                    </div>
                    <div v-for="item in box1" :key="item">
                        <p v-if="item.text1">{{item.text1}}</p>
                        <p class="p" v-if="item.text2">{{item.text2}}<strong>{{item.active}}</strong>{{item.text3}}</p>
                    </div>
                    <div class="promotion clearfix" v-for="item in box1" :key="item">
                        <span class="del" v-if="item.text4">{{item.text4}}</span>
                        <span class="tag" v-if="item.active4">{{item.active4}}</span>
                    </div>
                    <div class="col" v-for="item in box1" :key="item">
                        <router-link to="/" class="card" shadow="never" v-if="item.text5">{{item.text5}}</router-link>
                    </div>
                    <div class="p6" v-for="item in box1" :key="item">
                        <p v-if="item.text6">{{item.text6}}</p>
                    </div>
                </el-card>
                <div class="yd clearfix">
                    <div class="icon" v-for="(item, index) in imglog3" :key="index">
                        <i class="i"><img v-if="item.img" :src="item.img"></i>
                        <h4 v-if="item.text">{{item.text}}</h4>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第三段 与我们联系 -->
        <div class="bg-style">
            <div class="middle more">
                <div class="h28p">
                    <h1>与我们联系</h1>
                    <p>需要了解更多关于多会企业版的信息？我们可以根据您的需求为您提供专属解决方案。</p>
                </div>
                <div class="content-box"></div>
                <div class="working-hours">
                    <p>您亦可在工作时间直接致电：<strong style="color: #4893FF; font-weight: normal;">021-80370533</strong></p>
                </div>
            </div>
        </div>
        <!-- 第四段 多会企业独立部署版 -->
        <div class="si">
            <div class="middle">
                <div class="h1" v-for="item in content" :key="item">
                    <h1>多会企业独立部署版</h1>
                    <p v-if="item.text1">{{item.text1}}</p>
                </div>
                <div class="yd2 clearfix">
                    <div class="icon" v-for="(item, index) in imglog4" :key="index">
                        <i class="i"><img v-if="item.img" :src="item.img"></i>
                        <h4 v-if="item.text">{{item.text}}</h4>
                    </div>
                </div>
                <div class="active">
                    <el-col :span="4"><el-card class="btn1" shadow="hover">联系销售</el-card></el-col>
                </div>
            </div>
        </div>
        <!-- 第五段 与众多行业领袖一起使用多会 -->
        <div class="wu">
          <div class="middle clearfix">
            <div class="h1">
              <h1>与众多行业领袖一起使用多会</h1>
            </div>
            <div class="img clearfix">
              <span v-for="item in imageslogo" :key="item"><img class="imgl" v-if="item.img1" :src="item.img1"><img v-if="item.img2" :src="item.img2"></span>
            </div>
            <div class="platform clearfix">
              <h1 class="h111">免费获取 15 天多会企业版试用</h1>
              <el-row>
                <el-button class="but1" type="warning" plain>立即试用</el-button>
                <el-button class="btu2" type="primary" plain>联系销售</el-button>
              </el-row>
            </div>
          </div>
        </div>
    </div>
    <div><z-footer></z-footer></div>
</el-main>
</template>

<script>
import zHeader from '@/views/index/components/header.vue'
import zFooter from '@/views/index/components/footer.vue'
export default {
  components: { zHeader, zFooter },
  data () {
    return {
      logo: [
        { img: require('@/assets/img/dh_logo.png'), text: '企业版' }
      ],

      nav: [
        { text: '功能特征', index: 0 },
        { text: '价格费用', index: 1 },
        { text: '联系咨询', index: 2 }
      ],

      index: 0,

      imglog: [
        { img: require('@/assets/img/radius1.png'), text: '活动小程序' },
        { img: require('@/assets/img/radius2.png'), text: '微信服务号' },
        { img: require('@/assets/img/radius3.png'), text: '独立收款渠道' },
        { img: require('@/assets/img/radius4.png'), text: '融合品牌风格' }
      ],

      imglog2: [
        { img: require('@/assets/img/radius1.png'), text1: '独立活动小程序', text2: '独立品牌，完全属于您的微信小程序。与公众号无缝衔接，提供与品牌融合一致的优质用户体验。' },
        { img: require('@/assets/img/radius2.png'), text1: '结合微信服务号', text2: '通过微信服务号直接售票给粉丝。购票即关注，活动宣传精准送达，提高转化率。' },
        { img: require('@/assets/img/radius3.png'), text1: '实时专属收款渠道', text2: '通过主办方自有的微信支付或支付宝商户账号直接收款。资金即时到账，无须提现。' },
        { img: require('@/assets/img/radius4.png'), text1: '融合品牌风格', text2: '不仅隐藏多会品牌，还可配置匹配品牌风格的色彩和徽标。' }
      ],

      box1: [
        { text1: '独立微信小程序、公众号和网页版。微信支付、支付宝和 PayPal 实时到账。' },
        { text2: '￥', active: '9,999', text3: '元 / 年 *' },
        { text4: '￥1,3966', active4: '年付优惠', text5: '免费试用15天', text6: '按季度支付价格为：￥3499元 / 季' }
      ],
      imglog3: [
        { img: require('@/assets/img/radius5.png'), text: '活动场数无限' },
        { img: require('@/assets/img/radius6.png'), text: '子账号权限管理' },
        { img: require('@/assets/img/radius7.png'), text: '30 天无理由退款' },
        { img: require('@/assets/img/radius8.png'), text: '专属客户经理支持' }
      ],
      content: [
        { text1: '将多会企业版部署在自有的基础设施或云服务上。可确保数据的隐私性，同时可通过 API 和二次开发将多会企业版与自有业务模块融合。' }
      ],
      imglog4: [
        { img: require('@/assets/img/radius9.png'), text: '独立部署' },
        { img: require('@/assets/img/radius10.png'), text: '数据私密' },
        { img: require('@/assets/img/radius11.png'), text: '二次开发' },
        { img: require('@/assets/img/radius12.png'), text: '培训服务' }
      ],
      imageslogo: [
        { img1: require('@/assets/img/logo1.png'), img2: require('@/assets/img/logo2.png') },
        { img1: require('@/assets/img/logo3.png'), img2: require('@/assets/img/logo4.png') },
        { img1: require('@/assets/img/logo5.png'), img2: require('@/assets/img/logo6.png') },
        { img1: require('@/assets/img/logo7.png'), img2: require('@/assets/img/logo8.png') }
      ]
    }
  },

  mounted () {
    // 监听滚动事件
    window.addEventListener('scroll', this.onScroll)
  },
  destroy () {
    // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
    window.removeEventListener('scroll', this.onScroll)
  },
  methods: {
    // 滚动监听器
    onScroll () {
      // 获取所有锚点元素
      const navContents = document.querySelectorAll('.quanbu div')
      // 所有锚点元素的 offsetTop
      const offsetTopArr = []
      navContents.forEach(item => {
        offsetTopArr.push(item.offsetTop)
      })
      // 获取当前文档流的 scrollTop
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 定义当前点亮的导航下标
      let navIndex = 0
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是 n 了
        if (scrollTop >= offsetTopArr[n]) {
          navIndex = n
        }
      }
      // 把下标赋值给 vue 的 data
      this.index = navIndex
    },
    // 跳转到指定的索引的元素
    scrollTo (index) {
      // 获取目标的 offsetTop
      // css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
      const targetOffsetTop = document.querySelector(`.quanbu div:nth-child(${index + 1})`).offsetTop
      // 获取当前 offsetTop
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，步子迈大了会扯到蛋
      const STEP = 60
      // 判断是往下滑还是往上滑
      if (scrollTop > targetOffsetTop) {
        // 往上滑
        smoothUp()
      } else {
        // 往下滑
        smoothDown()
      }
      // 定义往下滑函数
      function smoothDown () {
        // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
        if (scrollTop < targetOffsetTop) {
          // 如果和目标相差距离大于等于 STEP 就跳 STEP
          // 否则直接跳到目标点，目标是为了防止跳过了。
          if (targetOffsetTop - scrollTop >= STEP) {
            scrollTop += STEP
          } else {
            scrollTop = targetOffsetTop
          }
          document.body.scrollTop = scrollTop
          document.documentElement.scrollTop = scrollTop
          // 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
          requestAnimationFrame(smoothDown)
        }
      }
      // 定义往上滑函数
      function smoothUp () {
        if (scrollTop > targetOffsetTop) {
          if (scrollTop - targetOffsetTop >= STEP) {
            scrollTop -= STEP
          } else {
            scrollTop = targetOffsetTop
          }
          document.body.scrollTop = scrollTop
          document.documentElement.scrollTop = scrollTop
          requestAnimationFrame(smoothUp)
        }
      }
    }
  }
}
</script>

<style>
@import "~@/assets/css/enterprise.css";
@import "~@/assets/css/template.css";
@import "~@/assets/css/public.css";
</style>
